<template>
	<div id="app">
		<div>
			<div>
				<h2>学生成绩管理前端 Vue-mark5</h2>
				<alter></alter>
				<ul style="display: flex;justify-content: space-between; list-style: none;">
					<li>姓名：{{store.state.user.name}}</li>
					<li>用户：{{role(store.state.user.role)}}</li>
					<li><img style="width: 4vw;height: 4vw;" v-bind:src="store.state.pic(store.state.user.pic)"/></li>
					<li><button @click="logout()">退出登录</button></li>
				</ul>
			</div>
		</div>
		<div style="display: flex; justify-content: space-between;">
			<div style="width: 100%; border: 2px solid darkcyan;">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted } from 'vue';
import store from './store';
import router from './router';
import alter from './components/Alter.vue';

const logout = () =>{
	store.state.clean();
	window.localStorage.setItem("token", "");
	console.dir(store.state.user)
	
	store.state.msg= "退出成功！"
	router.push("/login");
}

const role = (role)=>{
	if(role == undefined || role == ''){
		return '';
	}
	if(role == 'stu'){
		return "学生"
	}
	if(role == 'tea'){
		return "教师"
	}
	if(role == 'adm'){
		return "管理员"
	}
}

onMounted(()=>{
	router.push("/login")
	
})

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>
